<template>
  <view class="page black-ground invoice-info-page">
    <div class="page-title">开票信息 Invoice Information</div>

    <div class="wrap">
      <div class="ul">
        <div class="li" v-for="item in list" :key="item.id">
          <div class="info">
            <div class="tl">{{ item.title }}</div>
            <div class="tl">{{ item.taxNum }}</div>
            <div class="tl">{{ item.email }}</div>
          </div>
          <div class="bottom-btn-box">
            <div class="left">
              <div class="btn" @click="toSetDefault(item)">
                {{ item.isDefault == 1 ? '已设为默认发票信息' : '设为默认发票信息' }}
              </div>
            </div>
            <div class="right" style="display: flex">
              <div class="btn" style="margin-right: 20rpx" @click="toEdit(item.id)">修改</div>
              <div class="btn" @click="deleteItem(item.id)">删除</div>
            </div>
          </div>
        </div>
      </div>
      <div class="add-new-btn-box">
        <div class="add-new-btn" @click="toAdd">添加开票信息</div>
      </div>
    </div>
    <uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { useStore } from 'vuex'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { invoiceInfoList, invoiceInfoSetDefault, invoiceInfoDel } from '@/utils/api/invoice'
const store = useStore()

let list = ref<any>([])
const toAdd = () => {
  uni.navigateTo({
    url: '/pages/createInvoiceInfo/createInvoiceInfo'
  })
}

let page: number = 1
let reload: boolean = true
let loading = ref<boolean>(false)
let noMore = ref<boolean>(false)

const loadData = async () => {
  if (loading.value || noMore.value) {
    return
  } else {
    loading.value = true
    let { code, data } = await invoiceInfoList({ current: page, size: 10 })
    loading.value = false
    if (code === 200) {
      if (reload) {
        list.value = data.list
        reload = false
      } else {
        list.value = [...list.value, ...data.list]
      }
      if (data.next) {
        page++
      } else {
        noMore.value = true
      }
    }
  }
}

const toSetDefault = async (item: any) => {
  if (item.isDefault !== 1) {
    const res = await invoiceInfoSetDefault({ id: item.id })
    if (res.code == 200) {
      initData()
    }
  }
}

const deleteItem = (id: string | number) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该发票信息吗？',
    success: async (res) => {
      if (res.confirm) {
        const res = await invoiceInfoDel({ id: id })
        if (res.code == 200) {
          initData()
        }
      }
    }
  })
}

const toEdit = (id: string | number) => {
  uni.navigateTo({
    url: '/pages/createInvoiceInfo/createInvoiceInfo?id=' + id
  })
}
const initData = () => {
  page = 1
  reload = true
  noMore.value = false
  loadData()
}
let loaded: boolean = false
onLoad(() => {
  loaded = true
  initData()
})
onShow(() => {
  if (loaded) {
    loaded = false
  } else {
    initData()
  }
})
</script>

<style lang="scss" scoped>
@import './invoiceInfo.scss';
</style>
